<template>
    <div class="index">
        <el-form 
        class="loginForm"
        >
            <p>十方智育后台管理系统</p>

            <el-form-item 
            required>
                <el-input 
                class="usernameInp"
                v-model="usernameInput" 
                placeholder="用户名" 
                clearable>
                <template #prefix>
                    <el-icon><UserFilled /></el-icon>
                </template>
                </el-input>
            </el-form-item>

            <el-form-item 
            required>
                <el-input 
                class="passwordInp"
                v-model="passwordInput"
                type="password"
                placeholder="密码"
                show-password
                clearable>
                <template #prefix>
                    <el-icon><Lock /></el-icon>
                </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                class="checkCodeInp"
                v-model="checkcode"
                type="text"
                placeholder="验证码"
                clearable>
                    <template #prefix>
                    <el-icon><CircleCheck /></el-icon>
                    </template>
                </el-input>
                <img src="/img/checkcode.gif" alt="验证码">
            </el-form-item>
            <el-checkbox
            class="repass"
            v-model="checked"
            >
                记住密码
            </el-checkbox><br>
            <el-button @click="toIndex()" class="loginBut" type="primary">登录</el-button>

        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const usernameInput = ref('')
const passwordInput = ref('')
const checkcode = ref('')
const checked = ref(false)


const router=useRouter()

function toIndex() {
    if(usernameInput.value=='czh123'&&passwordInput.value=='123456'){
        ElMessage({
        message: '登陆成功',
        type: 'success',
        })
        router.push('/index')
    }else{
        usernameInput.value='czh123';
        passwordInput.value='123456';
        ElMessage({
        message: '用户名或密码错误！',
        type: 'error',
        })
    }
    
}


</script>

<style scoped>
.index{position: absolute; width: 100%; height: 100%; background-image: url(/img/bg.jpg); background-size: cover; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;}
.loginForm{width: 455px; height: 380px; background-color: #fff; border-radius: 5px; text-align: center; padding: 20px;}
p{font-size: 20px; color: #78819e;}
.usernameInp{width: 390px; height: 45px; margin-top: 20px; margin-left: 30px;}
.passwordInp{width: 390px; height: 45px; margin: 20px 0 20px 30px;}
.checkCodeInp{width: 220px; height: 45px; margin-left: 30px;}
img{height: 45px; margin-left: 40px;}
.repass{margin-left: -308px;}
.loginBut{width: 390px; height: 45px; margin-top: 25px;}
</style>